<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限首页</title>
    <!--<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0"/>-->
    <!--<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=b46bbcfa47a02a1c91b4fef4c1e40981&plugin=AMap.DistrictSearch"></script>-->
    <style type="text/css">
        #mapContainer {
            height:490px;
        }
        #tip {
            /*width: 500px;*/
            /*background-color: #fff;*/
            /*padding:10px 10px;*/
            /*border: 1px solid silver;*/
            /*box-shadow: 3px 4px 3px 0px silver;*/
            position: absolute;
            font-size: 12px;
            left: 235px;
            top: 52px;
            border-radius: 3px;
            line-height: 36px;
        }
        #tip2 {
            width: 470px;
            /*background-color: #fff;*/
            /*border: 1px solid silver;*/
            position: absolute;
            font-size: 12px;
            right: 10px;
            top: 52px;
            border-radius: 3px;
            line-height: 36px;
        }
        #row-address{
            background-color: #fff;
            border: 1px solid silver;
        }
        .sousuo{
            height: 20px;
        }
        .info {
            border: solid 1px silver;
        }
        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        #tip2 span {
            margin-left: 5px;
            font-size: 14px;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }
        .DJ{
            background: #fff;
            font-size: 14px;
        }

        .biankuang{
            border: 1px solid #000;
            display: none;
            margin:0 0 10px 0;
        }
        .topImg img{
            width: 25px;
            height: 25px;
        }
        .myCarImg img{
            width: 38px;
            height: 38px;
        }
        .myCarImg a{
            font-size: 28px;
        }
        .cdzImg img{
            width: 28px;
            height: 28px;
        }
        .cdzImg a{
            font-size: 28px;
        }
        .myCarImgOverLoad img{
            width: 32px;
            height: 25px;
        }
        .myCarImgOverLoad a{
            font-size: 28px;
        }
        .tableContent{
            display: none;
        }
        .heading{
            background-color: rgba(46, 117, 182, 1);
        }
        .heading img{
            width: 31px;
            height: 21px;
        }
        #closeWindow{
            width: 23px;
        }
        .closeSymbol{
            padding-right: 5px;
        }
        .serachHeight{
            height: 25px;
        }
    </style>
</head>
<body>
<div id="mapContainer"></div>
<div id="tip">
    <div class="container">
        <div class="row">
            <div class="col-md-6" id="row-address">
                省：<select id='province' class="serachHeight"  onchange='search(this)'></select>
                市：<select id='city' class="serachHeight"  onchange='search(this)'></select>
                区：<select id='district' class="serachHeight"  onchange='search(this)'></select>
                <input type="text" class="serachHeight" placeholder="请输入车牌号码">
                <span class="searchButton" role="button"><img src="../../images/bkgd.png" alt=""></span>
            </div>
            </div>
        </div>

</div>
<div id="tip2">
<div class="container" style="width:470px;">
    <div class="row">
        <div class="col-md-7 DJ" style="float:right;">
            <div style="border-right:1px solid #ccc;display:inline-block;width:130px;"><span class="topImg"><img src="../../images/u275.png" alt="">&nbsp;我的车</span><span class="fa fa-caret-down fa-lg" role="button"  onclick=displayDiv("myCar")></span></div>
            <div style="display:inline-block;"><span class="topImg"><img src="../../images/u319.png" alt="">&nbsp;充电桩</span><span class="fa fa-caret-down fa-lg" role="button"  onclick=displayDiv("chongdianzhuang")></span></div>
            <div class="biankuang " id="myCar">
                <div>
                    <span class="myCarImg"><img src="../../images/u307.png" alt="">总数&nbsp;<a id="carTotal">600</a></span>
                    <span class="myCarImgOverLoad"><img src="../../images/u313.png" alt="">负载&nbsp;<a id="overload" onclick=showTable("table_overload")>300</a></span>
                </div>
                <div>
                    <span class=myCarImg><img src="../../images/u311.png" alt="">充电中&nbsp;<a id="incharge">200</a></span>
                    <span class="myCarImg"><img src="../../images/u309.png" alt="">报警&nbsp;<a id="alert">10</a></span>
                </div>
            </div>

            <div class="biankuang" id="chongdianzhuang">
                <div>
                    <span class="cdzImg"><img src="../../images/u350.jpg" alt="">总数&nbsp;<a id="cdzTotal">600</a></span>
                    <span class="cdzImg"><img src="../../images/u346.png" alt="">社会桩&nbsp;<a id="shehuizhuang">389</a></span>
                </div>
                <div>
                    <span class="cdzImg"><img src="../../images/u352.png" alt="">自建桩&nbsp;<a id="zijianzhuang">211</a></span>
                    <span class="cdzImg"><img src="../../images/u348.png" alt="">可用&nbsp;<a id="useable">10</a></span>
                </div>
            </div>
        </div>
        <div class="col-md-12" style="clear:both;margin-top:10px;padding-right:0px;">
            <div class="panel panel-primary tableContent" id="table_overload">
                <div class="heading"><img src="../../images/u429.png" alt="">&nbsp;<span>负载车辆详细信息</span><span class="pull-right closeSymbol" role="button" onclick=closeWindowTable("table_overload")><img id="closeWindow" src="../../images/close.jpg" alt=""></span></div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>车牌号</th>
                        <th>当班司机</th>
                        <th>车状态</th>
                        <th>冷藏箱状态</th>
                        <th>更多</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>苏A12397</td>
                        <td>王XX</td>
                        <td>正常</td>
                        <td>正常</td>
                        <td>定位&nbsp;&nbsp;详细监测</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>苏AJ8997</td>
                        <td>赵XX</td>
                        <td>正常</td>
                        <td>正常</td>
                        <td>定位&nbsp;&nbsp;详细监测</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>苏A97YR0</td>
                        <td>孙XX</td>
                        <td>正常</td>
                        <td>正常</td>
                        <td>定位&nbsp;&nbsp;详细监测</td>
                    </tr>
                    </tbody>
                </table>
            </div>
    </div>
</div>
<script src="indexContent.js"></script>
<script type="text/javascript">
    function displayDiv(displayID)
    {
        var divBiankuang=$("#"+displayID);
        if(divBiankuang.css("display")=="block") {
            $(".biankuang").hide();
        }
        else {
            $(".biankuang").hide();
            divBiankuang.show();
        }
    }
    function showTable(showId){
        var showTable=$("#"+showId);
        showTable.show();
    }
    function  closeWindowTable(showId){
        var windowId=$("#"+showId);
        windowId.hide();
    }
</script>
</body>
</html>